<template>
  <div class="home-container">
    <header class="header-box">
      <h1>这是一个页头</h1>
      <small>这是一个描述信息</small>
    </header>
    <div class="content-box">
      <a-space direction="vertical" :size="20" align="center">
        <a-card hoverable size="small" style="width: 100%" :loading="loading">
          <img
            slot="cover"
            alt="example"
            src="https://cdn.jsdelivr.net/gh/ihewro/blog@master/usr/uploads/2019/01/762065921.jpg"
          />
          <template slot="actions" class="ant-card-actions">
            <div>
              <a-icon key="user" type="user" />
              <span>Yet</span>
            </div>
            <div>
              <a-icon key="user" type="clock-circle" />
              <span>2020年12月20日</span>
            </div>
            <div>
              <a-icon key="user" type="message" />
              <span>3条评论</span>
            </div>
          </template>
          <a-card-meta
            title="假如生活欺骗了你"
            description="共勉！假如生活欺骗了你，不要悲伤，不要心急！忧郁的日子里须要镇静：相信吧，快乐的日子将会来临！心儿永远向往着未来；现在却常是忧郁。一切都是瞬息，一切都将会..."
          >
            <a-avatar
              slot="avatar"
              src="http://p4.music.126.net/7WrnBnMM9k3Sw1YxD28MRg==/109951165545967215.jpg?param=300y300"
            />
          </a-card-meta>
        </a-card>

        <a-card hoverable size="small" style="width: 100%" :loading="loading">
          <template slot="actions" class="ant-card-actions">
            <div>
              <a-icon key="user" type="user" />
              <span>Yet</span>
            </div>
            <div>
              <a-icon key="user" type="clock-circle" />
              <span>2020年12月20日</span>
            </div>
            <div>
              <a-icon key="user" type="message" />
              <span>3条评论</span>
            </div>
          </template>
          <a-card-meta
            title="假如生活欺骗了你"
            description="共勉！假如生活欺骗了你，不要悲伤，不要心急！忧郁的日子里须要镇静：相信吧，快乐的日子将会来临！心儿永远向往着未来；现在却常是忧郁。一切都是瞬息，一切都将会..."
          >
            <a-avatar
              slot="avatar"
              src="http://p4.music.126.net/7WrnBnMM9k3Sw1YxD28MRg==/109951165545967215.jpg?param=300y300"
            />
          </a-card-meta>
        </a-card>

        <a-card hoverable size="small" style="width: 100%" :loading="loading">
          <template slot="actions" class="ant-card-actions">
            <div>
              <a-icon key="user" type="user" />
              <span>Yet</span>
            </div>
            <div>
              <a-icon key="user" type="clock-circle" />
              <span>2020年12月20日</span>
            </div>
            <div>
              <a-icon key="user" type="message" />
              <span>3条评论</span>
            </div>
          </template>
          <a-card-meta
            title="假如生活欺骗了你"
            description="共勉！假如生活欺骗了你，不要悲伤，不要心急！忧郁的日子里须要镇静：相信吧，快乐的日子将会来临！心儿永远向往着未来；现在却常是忧郁。一切都是瞬息，一切都将会..."
          >
            <a-avatar
              slot="avatar"
              src="http://p4.music.126.net/7WrnBnMM9k3Sw1YxD28MRg==/109951165545967215.jpg?param=300y300"
            />
          </a-card-meta>
        </a-card>

        <a-card hoverable size="small" style="width: 100%" :loading="loading">
          <template slot="actions" class="ant-card-actions">
            <div>
              <a-icon key="user" type="user" />
              <span>Yet</span>
            </div>
            <div>
              <a-icon key="user" type="clock-circle" />
              <span>2020年12月20日</span>
            </div>
            <div>
              <a-icon key="user" type="message" />
              <span>3条评论</span>
            </div>
          </template>
          <a-card-meta
            title="假如生活欺骗了你"
            description="共勉！假如生活欺骗了你，不要悲伤，不要心急！忧郁的日子里须要镇静：相信吧，快乐的日子将会来临！心儿永远向往着未来；现在却常是忧郁。一切都是瞬息，一切都将会..."
          >
            <a-avatar
              slot="avatar"
              src="http://p4.music.126.net/7WrnBnMM9k3Sw1YxD28MRg==/109951165545967215.jpg?param=300y300"
            />
          </a-card-meta>
        </a-card>

        <a-card hoverable size="small" style="width: 100%" :loading="loading">
          <template slot="actions" class="ant-card-actions">
            <div>
              <a-icon key="user" type="user" />
              <span>Yet</span>
            </div>
            <div>
              <a-icon key="user" type="clock-circle" />
              <span>2020年12月20日</span>
            </div>
            <div>
              <a-icon key="user" type="message" />
              <span>3条评论</span>
            </div>
          </template>
          <a-card-meta
            title="假如生活欺骗了你"
            description="共勉！假如生活欺骗了你，不要悲伤，不要心急！忧郁的日子里须要镇静：相信吧，快乐的日子将会来临！心儿永远向往着未来；现在却常是忧郁。一切都是瞬息，一切都将会..."
          >
            <a-avatar
              slot="avatar"
              src="http://p4.music.126.net/7WrnBnMM9k3Sw1YxD28MRg==/109951165545967215.jpg?param=300y300"
            />
          </a-card-meta>
        </a-card>

        <a-card hoverable size="small" style="width: 100%" :loading="loading">
          <template slot="actions" class="ant-card-actions">
            <div>
              <a-icon key="user" type="user" />
              <span>Yet</span>
            </div>
            <div>
              <a-icon key="user" type="clock-circle" />
              <span>2020年12月20日</span>
            </div>
            <div>
              <a-icon key="user" type="message" />
              <span>3条评论</span>
            </div>
          </template>
          <a-card-meta
            title="假如生活欺骗了你"
            description="共勉！假如生活欺骗了你，不要悲伤，不要心急！忧郁的日子里须要镇静：相信吧，快乐的日子将会来临！心儿永远向往着未来；现在却常是忧郁。一切都是瞬息，一切都将会..."
          >
            <a-avatar
              slot="avatar"
              src="http://p4.music.126.net/7WrnBnMM9k3Sw1YxD28MRg==/109951165545967215.jpg?param=300y300"
            />
          </a-card-meta>
        </a-card>

        <a-card hoverable size="small" style="width: 100%" :loading="loading">
          <template slot="actions" class="ant-card-actions">
            <div>
              <a-icon key="user" type="user" />
              <span>Yet</span>
            </div>
            <div>
              <a-icon key="user" type="clock-circle" />
              <span>2020年12月20日</span>
            </div>
            <div>
              <a-icon key="user" type="message" />
              <span>3条评论</span>
            </div>
          </template>
          <a-card-meta
            title="假如生活欺骗了你"
            description="共勉！假如生活欺骗了你，不要悲伤，不要心急！忧郁的日子里须要镇静：相信吧，快乐的日子将会来临！心儿永远向往着未来；现在却常是忧郁。一切都是瞬息，一切都将会..."
          >
            <a-avatar
              slot="avatar"
              src="http://p4.music.126.net/7WrnBnMM9k3Sw1YxD28MRg==/109951165545967215.jpg?param=300y300"
            />
          </a-card-meta>
        </a-card>
        <a-pagination :default-current="1" :total="500" @change="onChange" />
      </a-space>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false
    }
  }
}
</script>
<style lang="scss" scoped>
.home-container {
  background-color: #f1f3f4;
  .header-box {
    background-color: #f9f9f9;
    padding: 20px;
    h1 {
      font-size: 30px;
      color: #000;
      margin-bottom: 0;
    }
    small {
      letter-spacing: 2px;
      color: #a0a0a0;
      font-size: 13px;
    }
  }
  .content-box {
    padding: 20px;
    min-height: 100vh;
    span {
      margin-left: 10px;
      font-size: 12px;
    }
  }
}
</style>
